@border-radius: 4px;

.map-viewer {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: @border-radius;

  .map-viewer-header {
    padding: 14px;
    border-radius: @border-radius;
  }

  .map-viewer-toolbar {
    padding: 0 14px;
    display: flex;
    gap: 8px;
  }

  .map-viewer-content {
    flex: 1;
    padding: 14px;

    :global {
      .marker-info-name {
        font-weight: 700;
        margin-bottom: 8px;
      }

      .marker-info-container {
        display: flex;
        width: 400px;
        flex-wrap: wrap;
        gap: 10px;

        .info-item {
          display: flex;
          width: 195px;
          justify-content: space-around;

          .title {
            font-weight: 600;
            text-align: left;
            width: 62px;
          }

          .content {
            max-width: calc(100% - 72px);
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            cursor: pointer;
            text-align: left;
            flex-grow: 1;
          }
        }
      }
    }
  }

  .map-viewer-map {
    height: 100%;
  }
}
